<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}
<div class="container">
  <div class="m-5 p-5 bg-light">
    <div class="text-center border-bottom">
      <h2>{{ article.title }}</h2>
      <p>作者：{{ article.author }}</p>
      <p>{{ article.subhead }}</p>
      <p>
        <button type="button" class="btn btn-primary">{{ article.hits }} 浏览 </button>
        <button type="button" class="btn btn-success" id="downs">{{ article.downs }}点赞</button>         
        </p>
    </div>
    <div class="border-bottom" style="min-height: 300px">
      {{@ article.content }}
    </div>
    <div class="text-center pt-5">
      <p>如果您觉得这篇文章不错的话，请作者喝杯咖啡...</p>
      <button type="button" class="btn btn-danger" id="admire" style="position:relative;">
        赞赏
        <img src="img/wx.jpg" alt="wx" width="200px" style="position:absolute;top:-320px;left:-50px;display: none;">
      </button>
      <p class="mt-3">166人赞赏</p>
      <div class="">
        <img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1">
      </div>
    </div>
  </div>
</div>

<script>

  // 页面js中获取art-template 传递给页面的数据
  $(function(){

// 点赞
const id = "{{article.article_id}}";
const nickname = "{{nickname}}" || null;    
let downs = Number("{{article.downs}}");
let isDowns = true;
let onOff = Number("{{onOff}}");

$("#downs").click(function(){
  if (onOff === 1) {
    alert("您已点赞过!");
    return;
  }

  if (nickname === null) {
    alert('点赞请先登录')
    return;
  }

  if (isDowns) {
    downs++;
    $(this).html(`取消点赞 ${downs}`);
    isDowns = false;
    // 发送请求
    $.ajax({
      url:"/downs",
      type:"post",
      data:{id,downs,isDowns,nickname},
      success:function(data){
        console.log(data);
      }
    })
  }else{
    downs--;
    $(this).html(`点赞 ${downs}`);
    isDowns = true;
    // 发送请求
    $.ajax({
      url:"/downs",
      type:"post",
      data:{id,downs,isDowns,nickname},
      success:function(data){
        console.log(data);
      }
    })
  }
  

})

// 赞赏
$("#admire").click(function(){
  $(this).find('img').toggle();
})


})
</script>
{{/block}}